<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const isLoggedIn = computed(() => {
  return localStorage.getItem('isLoggedIn') === 'true'
})

const logout = () => {
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('rememberedAuth')
  router.push('/login')
}
</script>

<template>
  <nav class="navbar">
    <div class="navbar-left">
      <router-link to="/" class="logo">医学图像处理</router-link>
    </div>
    <div class="navbar-right">
      <template v-if="isLoggedIn">
        <router-link to="/upload" class="nav-link">图片上传</router-link>
        <router-link to="/history" class="nav-link">历史记录</router-link>
        <a href="#" class="nav-link" @click.prevent="logout">退出登录</a>
      </template>
      <template v-else>
        <router-link to="/login" class="nav-link">登录</router-link>
        <router-link to="/register" class="nav-link">注册</router-link>
      </template>
    </div>
  </nav>
</template>


<style scoped>
.navbar {
  width: 100%;
  height: 8vh;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  text-decoration: none;
}

.navbar-right {
  display: flex;
  gap: 30px;
}

.nav-link {
  font-size: 16px;
  color: #374151;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #2563eb;
}
</style>
